<template>
  <div id="add">
    <p class="text-[16px] text-[#FFFFFF] mb-[18px]">自动熄火<a-switch style="margin-left: 10px" v-model:checked="checked" /></p>
    <p class="text-white text-[12px] mb-[14px]" :class="{ '!text-[#818181]': !checked }">自动熄火时间段管理</p>
    <a-time-range-picker :disabled="!checked" :allowClear="false" v-model:value="times" value-format="HH:mm:ss" />
    <p class="text-white text-[12px] my-[14px]" :class="{ '!text-[#818181]': !checked }">空闲时间超过以下时间后进入熄火状态</p>
    <a-select v-model:value="duration_min" style="width: 228px" :disabled="!checked">
      <a-select-option value="30">半小时</a-select-option>
      <a-select-option value="60">1小时</a-select-option>
      <a-select-option value="120">2小时</a-select-option>
      <a-select-option value="180">3小时</a-select-option>
    </a-select>
  </div>
  <!-- <div class="mt-[60px] flex items-center !text-[16px] mb-[23px]">
    <span class="flex-shrink-0">创建批处理</span> -->
  <!-- <CloudUploadOutlined class="text-[18px] ml-[10px]" @click="upload" /> -->
  <!-- <input @change="chooseTemplate" ref="templateUploadRef" type="file" class="invisible" /> -->
  <!-- </div> -->
  <!-- <a-input class="mt-[23px]" v-model:value="filePath" /> -->
</template>
<script setup lang="ts">
import { apiGetAutoPlasma, apiPostAutoPlasma } from '@/http/api/controller_status';
import { message } from 'ant-design-vue';

// import { CloudUploadOutlined } from '@ant-design/icons-vue';
const filePath = ref('');
const checked = ref(false);
const times = ref<any>([]);
// const templateUploadRef = ref();
const duration_min = ref<number | string>(30);
// const upload = () => {
//   if (templateUploadRef.value) {
//     templateUploadRef.value.click();
//   }
// };
// const chooseTemplate = (e: any) => {
//   filePath.value = e.target.value;
// };

defineExpose({
  getData: () => {
    return {
      filePath: filePath.value,
      duration_min: duration_min.value,
      start: times.value[0] || '',
      end: times.value[1] || '',
    };
  },
  submit: async () => {
    if (checked.value) {
      if (duration_min.value === '') {
        message.error('请选择时间');
        return Promise.reject();
      }
      if (times.value.length === 0) {
        message.error('请选择时间');
        return Promise.reject();
      }
    }
    try {
      const res = await apiPostAutoPlasma({ value: checked.value, duration_min: Number(duration_min.value), start: times.value[0], end: times.value[1] });
      message.success(res.msg || '保存成功');
      return Promise.resolve();
    } catch (error) {
      message.error((error as any).msg || '保存失败');
      return Promise.reject();
    }
  },
});

const getAutoPlasma = async () => {
  try {
    const res = await apiGetAutoPlasma();
    checked.value = res.data.value;
    duration_min.value = res.data.duration_min || '';
    times.value[0] = res.data.start;
    times.value[1] = res.data.end;
  } catch (error) {}
};
onBeforeMount(() => {
  getAutoPlasma();
});
</script>
<style>
#add .ant-picker {
  background-color: #242424 !important;
  border: none !important;
}
#add .ant-picker .ant-picker-input input::placeholder {
  color: #5c5c5c;
}
</style>
<style lang="less" scoped>
:deep(.ant-picker-separator) {
  color: #fff !important;
}
:deep(.ant-picker-input > input) {
  color: #fff !important;
}

// :deep()
// #duration_min-range-picker {
//   color: white !important;
// }
// .ant-picker {
//   background-color: #242424;
//   color: #fff !important;
//   border: none !important;

//   .ant-picker-separator {
//     color: #fff !important;
//   }
// }
// .ant-picker-picker input {
//   color: #fff !important;
// }
// input {
//   color: #fff !important;
// }
// input::input-placeholder {
//   color: red !important;
// }
</style>
